<template>
    <div class="window-aside">
        <div class="window-aside-btn-addNewConnection">
            <el-button type="warning" icon="el-icon-circle-plus" @click="addConnectionDialogVisible=true">{{$t('aside.addConnection')}}</el-button>
        </div>
        <div class="window-aside-box">
            <menuBox v-for="connection in connections" :key="connection.uid" :connection="connection"></menuBox>
        </div>
        <addConnectionDialog :visible="addConnectionDialogVisible" :connection="null" @updateVisible="addConnectionDialogVisible=false"></addConnectionDialog>
    </div>
</template>

<script>
import menuBox from '@/components/aside/menuBox'
import addConnectionDialog from '@/components/dialog/addConnectionDialog'
export default {
    components:{
        menuBox,addConnectionDialog
    },
    data(){
        return {
            addConnectionDialogVisible:false
        }
    },
    computed:{
        connections(){
            return this.$store.getters.connections
        }
    }
}
</script>

<style scoped>
    .window-aside{
        margin-right: 10px;
    }
    .window-aside-btn-addNewConnection button{
        width: 100%;
    }
    .window-aside-btn-addNewConnection{
        margin-bottom: 10px;
    }
</style>>